<template>
    <div>

        <el-dialog
                title="搜索"
                :visible.sync="dialogVisible"
                width="30%">

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <img :src="imgUrl" alt="">
                </div></el-col>
            </el-row>

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <span>用户名: </span> <input type="text" v-model="name">
                </div></el-col>
            </el-row>

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <span>密码: </span>  <input type="text" v-model="pwd">
                </div></el-col>
            </el-row>
        </el-dialog>

        <el-card class="box-card">
            <el-row style="margin-bottom: 20px">
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <span style="font-size: 25px;">注册</span>
                </div></el-col>
            </el-row>
            <el-form ref="form"  label-width="80px" style="margin-right: 150px;margin-left: 120px">
                <el-form-item label="用户名: ">
                    <el-input placeholder="请输入用户名" v-model="name"  style=""></el-input>
                </el-form-item>
                <el-form-item label="密码: ">
                    <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            :action="uploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img style="width: 150px;height: 150px;" v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>


            <el-button type="success" @click="register">注册</el-button>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Register",
        data(){
            return{
                name:'',
                pwd:'',
                dialogVisible:false,
                //文件上传
                imageUrl: "",
                imgUrl: "",
                uploadUrl: "/findAll/user/upload",  //上传服务器路径
                imgPath: ""
            }
        },
        methods:{
            //注册方法
            register(){
                var obj = new URLSearchParams();
                obj.append("name",this.name);
                obj.append("pwd",this.pwd);
                obj.append("faceImg",this.imgPath);
                this.axios.post("/findAll/user/add",obj);
                this.$router.push("/");
                // this.dialogVisible = true;
            },

            //文件上传
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                if (res.code == 0){
                    this.imgPath = res.info;
                    this.imgUrl = "findAll/img/"+res.info;

                    this.$message({
                        message: '文件上传成功',
                        type: 'success'
                    });
                }else {
                    this.$message.error(res.info);
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>
    .box-card{
        margin-top: 10%;
        margin-left: 30%;
        margin-right: 30%;
    }
    /*.avatar-uploader .el-upload {*/
    /*    border: 1px dashed #d9d9d9;*/
    /*    border-radius: 6px;*/
    /*    cursor: pointer;*/
    /*    position: relative;*/
    /*    overflow: hidden;*/
    /*}*/
    /*.avatar-uploader .el-upload:hover {*/
    /*    border-color: #409EFF;*/
    /*}*/
    /*.avatar-uploader-icon {*/
    /*    font-size: 28px;*/
    /*    color: #8c939d;*/
    /*    width: 178px;*/
    /*    height: 178px;*/
    /*    line-height: 178px;*/
    /*    text-align: center;*/
    /*}*/
    /*.avatar {*/
    /*    width: 178px;*/
    /*    height: 178px;*/
    /*    display: block;*/
    /*}*/
</style>